<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>商品列表</title>
  <link rel="shortcut icon" href=" favicon.ico" />
  <link rel="stylesheet" href="./fonts/iconfont.css">
  <link rel="stylesheet" href="./css/base.css" />
  <link rel="stylesheet" href="./css/common.css" />
  <link rel="stylesheet" href="./css/list.css" />
</head>

<body>
  <!-- 快捷导航栏 开始 -->
  <div class="shortcut">
    <div class="w">
      <div class="left">
        <!-- 如果是同一类型的子元素 就用nth-child 如果不是 nth-of-type -->
        <span>品优购欢迎您！</span><a href="#">请登录</a><a href="#" class="type_red">免费注册</a>
      </div>
      <div class="right">
        <ul>
          <li><a href="#">我的订单</a></li>
          <li class="line">丨</li>
          <li>
            <a href="#">
              我的品优购
              <i class="iconfont iconxiajiantou"></i>
            </a>
          </li>
          <li class="line">丨</li>
          <li><a href="#">品优购会员</a></li>
          <li class="line">丨</li>
          <li><a href="#">企业采购</a></li>
          <li class="line">丨</li>
          <li>
            <a href="#">
              关注品优购
              <i class="iconfont iconxiajiantou"></i>
            </a>
          </li>
          <li class="line">丨</li>
          <li>
            <a href="#">
              客户服务
              <i class="iconfont iconxiajiantou"></i>
            </a>
          </li>
          <li class="line">丨</li>
          <li>
            <a href="#">
              网站导航
              <i class="iconfont iconxiajiantou"></i>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 快捷导航栏 结束 -->

  <!-- header部分 开始 -->
  <div class="header w">
    <!-- logo部分 -->
    <h1>
      <a href="#">品优购</a>
    </h1>
    <h2>
      <a href="#">秒杀</a>
    </h2>
    <!-- 搜索框部分 -->
    <div class="search">
      <input type="search" name="" id="" placeholder="语言开发" />
      <button>搜索</button>
    </div>
    <!-- hotword 热词部分 -->
    <div class="hotword">
      <a href="#" class="type_red">优惠购首发</a><a href="#">亿元优惠</a><a href="#">9.9元团购</a><a href="#">美满99减30</a><a
        href="#">办公用品</a><a href="#">电脑</a><a href="#">通信</a>
    </div>
    <!-- shopcar 购物车部分 -->
    <div class="shopcar">
      <i class="iconfont icongouwuche_huaban"></i>
      <a href="#">我的购物车</a>
      <i class="iconfont iconyoujiantou"></i>
      <span>8</span>
    </div>
  </div>
  <!-- header部分 结束 -->

    <!-- nav部分 开始 -->
    <div class="nav">
      <div class="w">
         <div class="sk_list">
           <ul>
             <li><a href="#">品优秒杀</a></li>
             <li><a href="#">品优秒杀</a></li>
             <li><a href="#">品优秒杀</a></li>
           </ul>
         </div>
         <div class="sk_con">
           <ul>
             <li><a href="#">女装</a></li>
             <li><a href="#">女装</a></li>
             <li><a href="#">女装</a></li>
             <li><a href="#">女装</a></li>
             <li><a href="#">女装</a></li>
             <li><a href="#">女装</a></li>
             <li><a href="#">女装</a></li>
             <li><a href="#">女装</a></li>
             <li>
               <a href="#">
               更多分类
               <i class="iconfont iconxiajiantou"></i>
              </a>
            </li>
           </ul>
         </div>
      </div>
  </div>
  <!-- nav部分 结束 -->

<!-- 列表内容区域 开始 -->
<div class="list_content w">
  <!-- 列表头部 -->
  <div class="list_hd">
    <img src="./upload/bg_03.png" alt="">
  </div>
  <div class="list_bd">
    <ul class="clearfix">
      <li>
        <div class="img">
          <img src="./upload/pro.jpg" alt="">
        </div>
      </li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
    </ul>
  </div>
</div>
<!-- 列表内容区域 结束 -->
  <!-- footer部分 开始 -->
  <footer>
    <div class="w">
      <div class="mod_server">
        <ul>
          <li>
            <h5></h5>
            <div class="mod_server_list">
              <h4>正品保障</h4>
              <p>正品保障，提供发票</p>
            </div>
          </li>
          <li>
            <h5></h5>
            <div class="mod_server_list">
              <h4>极速物流</h4>
              <p>急速物流，急速送达</p>
            </div>
          </li>
          <li>
            <h5></h5>
            <div class="mod_server_list">
              <h4>无忧售后</h4>
              <p>7天无理由退换货</p>
            </div>
          </li>
          <li>
            <h5></h5>
            <div class="mod_server_list">
              <h4>特色服务</h4>
              <p>私人定制家电套餐</p>
            </div>
          </li>
          <li>
            <h5></h5>
            <div class="mod_server_list">
              <h4>帮助中心</h4>
              <p>您的购物指南</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="mod_help">
        <div class="mod_help_nav">
          <h4>购物指南</h4>
          <ul>
            <li><a href="#">购物流程</a></li>
            <li><a href="#">会员介绍</a></li>
            <li><a href="#">生活旅行/团购</a></li>
            <li><a href="#">常见问题</a></li>
            <li><a href="#">大家电</a></li>
            <li><a href="#">联系客服</a></li>
          </ul>
        </div>
        <div class="mod_help_nav">
          <h4>配送方式</h4>
          <ul>
            <li><a href="#">上门自提</a></li>
            <li><a href="#">211限时达</a></li>
            <li><a href="#">配送服务查询</a></li>
            <li><a href="#">配送费收取标准</a></li>
            <li><a href="#">海外配送</a></li>
          </ul>
        </div>
        <div class="mod_help_nav">
          <h4>支付方式</h4>
          <ul>
            <li><a href="#">货到付款</a></li>
            <li><a href="#">在线支付</a></li>
            <li><a href="#">分期付款</a></li>
            <li><a href="#">邮局汇款</a></li>
            <li><a href="#">公司转账</a></li>
          </ul>
        </div>
        <div class="mod_help_nav">
          <h4>售后服务</h4>
          <ul>
            <li><a href="#">售后政策</a></li>
            <li><a href="#">价格保护</a></li>
            <li><a href="#">退款说明</a></li>
            <li><a href="#">返修/退换货</a></li>
            <li><a href="#">取消订单</a></li>
          </ul>
        </div>
        <div class="mod_help_nav">
          <h4>特色服务</h4>
          <ul>
            <li><a href="#">夺宝岛</a></li>
            <li><a href="#">DIY装机</a></li>
            <li><a href="#">延保服务</a></li>
            <li><a href="#">品优购E卡</a></li>
            <li><a href="#">品优购通信</a></li>
          </ul>
        </div>
        <div class="mod_help_nav">
          <h4>帮助中心</h4>
          <div class="img">
            <img src="./images/wx_cz.jpg" alt="">
          </div>
          <p>品优购客户端</p>
        </div>
      </div>
      <!-- 友情链接 -->
      <div class="copyright">
        <div class="links">
          <p>
            <a href="#">关于我们</a><span>|</span>
            <a href="#">联系我们</a><span>|</span>
            <a href="#">联系客服</a><span>|</span>
            <a href="#">商家入驻</a><span>|</span>
            <a href="#">营销中心</a><span>|</span>
            <a href="#">手机品优购</a><span>|</span>
            <a href="#">友情链接</a><span>|</span>
            <a href="#">销售联盟</a><span>|</span>
            <a href="#">品优购社区</a><span>|</span>
            <a href="#">品优购公益</a><span>|</span>
            <a href="#">English Site</a><span>|</span>
            <a href="#">Contact U</a>
          </p>
        </div>

        <div class="address">
          地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br>
          京ICP备08001421号京公网安备110108007702
        </div>
      </div>
  </footer>
  <!-- footer部分 结束 -->
</body>

</html>